<!-- 维保详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" :isrefresh="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">维保详情</block>
		</cu-custom>
		<view class="center">
					<view class="content" style="background-color: #fff;">
			<ul>
				<li>
					<text class="list-info">任务名称：</text>
					<text class="list-title">{{title}}</text>
				</li>
				<li>
					<text class="list-info">维保人员：</text>
					<text class="list-title">{{wbry}}</text>
				</li>
				<li>
					<text class="list-info">业主名称：</text>
					<text class="list-title">{{yzmc}}</text>
				</li>
				<li>
					<text class="list-info">维保企业：</text>
					<text class="list-title">{{wbqy}}</text>
				</li>
				<li>
					<text class="list-info">任务状态：</text>
					<text class="list-title">{{status| maintenanceTaskStatus}}</text>
				</li>
			</ul>
		</view>
		<view class="all_desc">
			<text>还需巡检触发 {{xcf}} 个年度维保设备</text>
		</view>
		<view>
			<view class="zj">
				<view>检查设备：已完成 <text class="title_big_jc state-green">{{ywc}}</text> 个 / 需要完成 <text class="title_big">{{xwc}}</text> 个
				</view>
				<uni-icons @click="close('p')" class="close" :type="picon" size="16"></uni-icons>
			</view>
			<view :style="pShow ? '' : 'display: none;'" class="detail">
				<view v-for="(item,index) in list1" :key="index">
					<text>{{item.name}}：已完成 <text class="state-green">{{item.zwcs}}</text> 个 / 需要完成 {{item.xywcs}} 个</text>
					<button class="my-btn cu-btn bg-system-blue shadow uni-btn-small"
						@click="see_detail(item)">详情</button>
				</view>
			</view>
		</view>
		<view >
			<view class="zj">
				<view>月度维保任务</view>
				<uni-icons @click="close('y')" class="close" :type="yicon" size="16"></uni-icons>
			</view>
			<view :style="yShow ? '' : 'display: none;'" class="detail">
				<view v-for="(item,index) in list2" :key="index">
					<text>{{item.month}}：已完成 {{item.overCount}} 个 / 需要完成 {{item.neddCount}} 个</text>
					<button class="my-btn cu-btn bg-system-orange shadow uni-btn-small"
						@click="checkItemM(item)">详情</button>
				</view>
			</view>
		</view>
		</view>


		<view class="flex btns-group foot" style="position: initial;">
			<button class="my-btn-grpup" v-if="status===1 " @click="startTask(ucId)">确认任务</button>
			<button class="my-btn-grpup" v-if="status===2 " @click="startExecute(ucId)">开始执行</button>
			<button class="my-btn-grpup" v-if="!maintenanceTaskInfo.yearComplete && !maintenanceTaskInfo.monthComplete && maintenanceTaskInfo.status==4" @click="stopTask(ucId, maintenanceTaskInfo.enterpriseId)">暂停任务</button>
			<button class="my-btn-grpup" v-if="maintenanceTaskInfo.monthComplete && status===4 " @click="completeTask(ucId)">结束本次维保</button>
			<button class="my-btn-grpup" v-if="maintenanceTaskInfo.yearComplete && (maintenanceTaskInfo.status==3 || maintenanceTaskInfo.status==4) " @click="endTask(ucId)">已完成</button>
		</view>
		
		<uni-popup ref="popup" type="center">
		    <uni-popup-message style="width: 90%;margin-left: 5%;border-radius: 5px;" type="error" :message="tipMessage"></uni-popup-message>
		</uni-popup>
		<message />
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.ucId = option.ucId
			// 封装参数
			this.getInMaintenanceInfoVo()
		},
		data() {
			return {
				tipMessage: '',
				ucId: '',
				title: '',
				wbry: '',
				yzmc: '',
				wbqy: '',
				rwzt: '',
				list1: [],
				list2: [],
				pShow: false,
				yShow: false,
				picon: 'top',
				yicon: 'top',
				show: '',
				tableList: [],
				ywc: 0,
				xwc: 0,
				xcf: 0,
				status:0,
				maintenanceTaskInfo: {}
			}
		},
		methods: {
			stopTask(val, enterpriseId) {
				console.log('000000', val)
				let params = {
					"ucId": val,
					"enterpriseId": enterpriseId
				}
				let that = this
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/maintenance/stopTask',
					data: params
				}).then(function(res) {
					that.getInMaintenanceInfoVo()
				}).catch(function(e) {
				
				})
			},
			getInMaintenanceInfoVo() {
				let params = {
					"ucId": this.ucId
				}
				let that = this
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/maintenance/getInMaintenanceInfoVo',
					data: params
				}).then(function(res) {
					that.maintenanceTaskInfo = res.data.data
					that.title = res.data.data.title
					that.status = res.data.data.status
					that.wbry = res.data.data.userName
					that.yzmc = res.data.data.enterpriseName
					that.wbqy = res.data.data.maintenaceEnterpriseName
					that.rwzt = res.data.data.statusStr
					that.xwc = res.data.data.needEquNum
					that.xcf = res.data.data.needMonthEquNum
					
					that.list1 = res.data.data.inMaintenanceInfoDataVoList
					that.list2 = res.data.data.inMonthDataVoList
				
					for (var i = 0; i < that.list1.length; i++) {
						let obj = that.list1[i]
						that.ywc += obj.zwcs
					}
				
					
				
				}).catch(function(e) {
				
				})
			},
			see_detail(data) {
				uni.navigateTo({
					url: '../wbsblb/wbsblb?maintenanceId=' + this.ucId + '&typeCode=' + data.code + '&isvideo=' + data.inMaintenanceInfoDataList[0].isvideo
				})
			},
			checkItemM(value) {
				uni.navigateTo({
					url:'../wbsblb/wbsblb?maintenanceId='+this.ucId + '&executeTime=' + value.month
				})
			},
			hideModal(e) {
				this.show = null
			},
			close(val) {
				console.log("++++++++++++++++++++++++++++++++++++++++++++")
				this[`${val}Show`] = !this[`${val}Show`]
				this[`${val}icon`] = this[`${val}Show`] ? 'bottom' : 'top'
			},
			//开始任务
			startTask(val) {
				let that = this
				let params = {
					"ucId": val
				}
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: '/wx/maintenance/startMaintenanceTask',
					data: params
				}).then(function(res) {
					that.getInMaintenanceInfoVo(that.ucId)
				}).catch(function(e) {})
			},
			completeTask(val) {
				let that = this
				let params = {
					"ucId": val
				}
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: '/wx/maintenance/completeTask',
					data: params
				}).then(function(res) {
					that.getInMaintenanceInfoVo(that.ucId)
				}).catch(function(e) {})
			},
			endTask(val){
				let that = this
				let params = {
					"ucId": val
				}
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: '/wx/maintenance/updateEnd',
					data: params
				}).then(function(res) {
					that.getInMaintenanceInfoVo(that.ucId)
				}).catch(function(e) {})
			},
			startExecute(val){
				let that = this
				let params = {
					"ucId": val
				}
				// 生成报警信息
				let app = getApp()
				app.globalData.request({
					url: '/wx/maintenance/startExecute',
					data: params
				}).then(function(res) {
					if(res.data.data.code != 200){
						that.tipMessage = res.data.data.msg
						that.$refs.popup.open('center')
						return
					}
					that.getInMaintenanceInfoVo(that.ucId)
				}).catch(function(e) {})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100vw;
		display:flex;
		flex-direction: column;
	}
	.center {
		flex: 1;
	}
	.foot {
		height: 100px;
	}

	.content {
		margin-top: 24rpx;
		ma: 66px;
		background-color: #FFFFFF;
	}

	ul li {
		list-style: none;
		margin: 0;
		padding: 0;
		margin-left: 24rpx;
		position: relative;
	}

	li text {
		font-size: 24rpx;
		line-height: 94rpx;
	}

	li::after {
		content: '';
		position: absolute;
		left: 2rpx;
		bottom: 0;
		right: 2rpx;
		height: 1px;
		background-color: #dcdcdc;
	}

	.all_desc {
		font-size: 38rpx;
		text-align: center;
		color: red;
		margin-top: 24rpx;
	}

	.zj {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		padding-left: 24rpx;
		background: #FFFFFF;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.detail {
		display: flex;
		flex-direction: column;

	}

	.detail text {
		line-height: 105rpx;
		font-size: 21rpx;
	}

	.detail button {
		float: right;
		width: 140rpx;
		height: 50rpx;
		background: #FABD50;
		box-shadow: 0 4px 14px 0 rgba(250, 189, 80, 0.50);
		border-radius: 6px;
		border-radius: 6px;

		font-size: 21rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
		position: absolute;
		right: 0;
		bottom: 10rpx;

	}

	.detail view {
		margin: 10rpx 40rpx;
		border-bottom: 1px solid #CCCCCC;
		position: relative;
	}

	.title_big {
		color: #FABD50;
		font-size: 32rpx;
		font-weight: 600;
		display: inline-block;
		padding: 0 12rpx;
	}
	
	.title_big_jc {
		color:#23bf37;
		font-size: 32rpx;
		font-weight: 600;
		display: inline-block;
		padding: 0 12rpx;
	}

	.close {
		width: 80rpx;
	}

	.my-btn {
		height: 94rpx;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}
	
	.my-btn-grpup {
		height: 120rpx;
		line-height: 120rpx;
		vertical-align: middle;
		text-align: center;
	}
	
	.btns-group {
		width: 100%;
		position: fixed;
		bottom: 0;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		z-index: -1;
	}
	
	.btns-group button:first-child {
		background-color: #458DF5;
		color: #FFFFFF;
		flex: 1;
		font-size: 36rpx;
		outline: none;
		border: none;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;
		border-top-left-radius: 6px;
	}
	
	.btns-group button:nth-child(2) {
		background-color: #54BE7A;
		color: #FFFFFF;
		flex: 1;
		font-size: 36rpx;
		outline: none;
		border: none;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;
	}
	
	.btns-group button:last-child {
		background-color: #FABD50;
		flex: 1;
		color: #FFFFFF;
		font-size: 36rpx;
		outline: none;
		border: none;
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;
		border-top-right-radius: 6px;
	}

	.cu-modal {
		overflow-y: auto;
		position: fixed;
		top: 200px;
		right: 0;
		bottom: 200px;
	}

	.list-title {
	color: #333;
}
</style>
